<template>
	<view class="details" v-if="info.nickname">
		<u-navbar title="详情" title-style="color:#fff" left-icon-color="#fff" :placeholder="false"
			bgColor="rgba(0,0,0,0.0)" @leftClick="leftclick">
			<view slot="center">
				<view class="head-right">
					<view>详情</view>
					<image class="heart" @click="gocoll(1)" v-if="info.is_collect == 0"
						src="https://m.lqvvvv.com/assets/static/index/heart0.png" mode=""></image>
					<image class="heart" @click="gocoll(2)" v-else src="https://m.lqvvvv.com/images/Frame2.png" mode="">
					</image>
					<!-- <image class="warn" src="https://m.lqvvvv.com/assets/static/index/warn.png" mode=""></image> -->
				</view>
			</view>
		</u-navbar>
		<view class="top-bg">
			<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="5000" :duration="500">
				<!-- #ifdef H5 -->
				<swiper-item style="height: 100%;" v-if="info.intro_video">
					<video v-if="!videoReset" :enable-play-gesture="true" :enable-progress-gesture="false"
						@ended="videoended" style="width: 100%; height: 100%;"
						:src="'https://m.lqvvvv.com' + info.intro_video" :controls="false"></video>
				</swiper-item>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<swiper-item style="height: 100%;" v-if="videoshow == true && info.intro_video&&isshow == 0">
					<video v-if="!videoReset" @ended="videoended" :enable-play-gesture="true"
						:enable-progress-gesture="false" style="width: 100%; height: 100%;"
						:src="'https://m.lqvvvv.com' + info.intro_video" :controls="false"></video>
				</swiper-item>
				<!-- #endif -->
				<swiper-item v-for="(item,index) in info.photos" :key="index" @click="goimg(index)">
					<image class="details-bg" :src="'https://m.lqvvvv.com'+item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="content">
			<view class="info-box">
				<view class="info-head">
					<view class="name">
						{{info.nickname}}
					</view>
					<view class="age">
						<image v-if="info.gender == 2" src="https://m.lqvvvv.com/assets/static/index/female0.png"
							mode=""></image>
						<image v-else src="https://m.lqvvvv.com/assets/static/index/maleb.png" mode=""></image>
						<view class="text" :style="info.gender == 2?'color:#F24789':'color:#4983F2'">
							{{info.age}}
						</view>
					</view>
					<image class="vip" v-if="info.level == 1" src="https://m.lqvvvv.com/assets/static/index/grade1.png"
						mode=""></image>
					<image class="vip" v-if="info.level == 2" src="https://m.lqvvvv.com/assets/static/index/grade2.png"
						mode=""></image>
					<image class="vip" v-if="info.level == 3" src="https://m.lqvvvv.com/assets/static/index/grade3.png"
						mode=""></image>
				</view>
				<view class="figure">
					<view class="weight">
						<view>{{info.height}}cm/{{info.weight}}kg</view>
					</view>
					<view class="address">
						<image src="https://m.lqvvvv.com/assets/static/index/address.png" mode=""></image>
						<view>
							距离{{info.distance}}公里
						</view>
					</view>
				</view>
				<view class="introduce">
					<image src="https://m.lqvvvv.com/assets/static/index/punctuation.png" mode=""></image>
					<view>
						{{info.intro}}
					</view>
				</view>
			</view>
		</view>
		<view class="voice" @click="goplay()" v-if="isshow == 0">
			<image src="https://m.lqvvvv.com/assets/static/index/voice-icon.png" mode=""></image>
			<view>{{info.voice_time}}’</view>
		</view>
		<view class="box">
			<view class="interest-box">
				<view class="title">
					兴趣爱好
				</view>
				<view class="hobby">
					<view class="hobby-left">
						<view class="hobby-item" v-if="x < 3" :class="'bg'+x" v-for="(i,x) in info.subjects" :key="x">
							#{{i.title}}
						</view>
					</view>
					<view class="tisp" v-if="info.is_official == 1">
						<image src="https://m.lqvvvv.com/assets/static/index/gfrz.png" mode=""></image>
					</view>
					<view class="tisp" v-if="info.is_official == 0">
						<image src="https://m.lqvvvv.com/assets/static/index/smrz.png" mode=""></image>
					</view>
				</view>
				<view class="open-vip">
					<view></view>
					<view class="vip-text" @click="govip">
						查看
					</view>
				</view>
				<view class="album">
					<view :class="item.show == true?'activity-item':''" class="album-item"
						v-for="(item,index) in albumList" :key="index" @click="cutAlbum(index)">
						{{item.text}}
					</view>
				</view>
				<scroll-view scroll-x="true" style="width: 100%; overflow: hidden;">
					<view class="picture">
						<view class="picture-item" v-for="(item,index) in info.photos" @click="goimg(index)"
							:key="index">
							<image :src="'https://m.lqvvvv.com'+item" mode="aspectFill"></image>
						</view>
					</view>
				</scroll-view>
				<view class="title">
					TA的技能
				</view>
				<view class="skill">
					<view class="skill-item" v-for="(item,index) in subjects" :key="index">
						<view class="skill-left">
							<image :src="'https://m.lqvvvv.com'+item.image" mode=""></image>
							<view class="left-box">
								<view class="left-title">
									{{item.title}}
								</view>
								<view class="price">
									<text>{{item.price}}</text>币/60分钟
								</view>
							</view>
						</view>
						<view class="skill-btn" v-if="userinfo.is_adolescent == 0" @click="goplaymake(item)">
							立即下单
						</view>
					</view>
					<view style="height: 110rpx;"></view>
				</view>
			</view>
		</view>
		<view class="bottom-btn" v-if="isshow == 0 && userinfo.is_adolescent == 0">
			<view class="liwu" @click="show = true">
				<image src="https://m.lqvvvv.com/images/liwuicon.png" mode=""></image>
				<view>
					送礼物
				</view>
			</view>
			<view class="make" @click="goMake">
				<image src="https://m.lqvvvv.com/assets/static/index/make-icon.png" mode=""></image>
				<view>
					预约
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="show = false" mode="bottom">
			<view class="pop-box">
				<view class="pop-title">送礼物</view>
				<view class="icon">
					<image src="https://m.lqvvvv.com/images/liwuxh.png" mode=""></image>
				</view>
				<view class="selse">
					<view :class="item.num == number? 'selse-item2':'selse-item'" @click="goselse(item.num)"
						v-for="(item,index) in liwulist" :key="index">{{item.num}}</view>
				</view>
				<view class="input-box">
					<view class="box-title">自定义数量</view>
					<view class="input"><u--input placeholderStyle="background: #F1F6FD;" placeholder="请输入内容"
							border="surround" v-model="number"></u--input></view>
				</view>
				<view class="input-box">
					<view class="box-title">付款方式</view>
					<view class="input" @click="show = false,pickershow = true">
						<u-input readonly placeholderStyle="background: #F1F6FD;" placeholder="请输入内容" border="surround"
							v-model="pickertext">
							<template slot="suffix">
								<u-icon name="arrow-right" color="#797979" size="14"></u-icon>
							</template>
						</u-input>
					</view>
				</view>
				<view class="btn-box" @click="gobuy">
					赠送
				</view>
			</view>
		</u-popup>
		<view class="flower-box" v-if="showFlower">
			<image class="flower-img" src="https://m.lqvvvv.com/images/liwuxh.png" mode="heightFix" />
			<view class="flower-number">x{{number}}</view>
		</view>
		<u-picker :show="pickershow" @cancel="pickershow = false" @confirm="confirm" :columns="columns"></u-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				liwulist: [{
						num: '1'
					},
					{
						num: '99'
					},
					{
						num: '520'
					},
					{
						num: '1314'
					}
				],
				columns: [
					['余额', '微信']
				],
				number: '1',
				albumList: [{
						text: '相册',
						show: true
					},
					// {
					// 	text: '动态',
					// 	show: false
					// },
				],
				subjects: [],
				id: '',
				info: {},
				isshow: 0,
				videoReset: false,
				audio: null,
				innerAudioContext: null,
				userinfo: {},
				videoshow: false,
				pickershow: false,
				type: 0,
				show: false, // 控制弹窗
				showFlower: false, // 控制花朵
				pickertext: '余额'
			}
		},
		computed: {
			...mapState(['isRealName', 'location']),
		},
		onLoad(e) {
			this.id = e.id
			this.type = e.type
			this.getinfo()
			this.getsubjects()
		},
		onShareAppMessage() {
			// 返回自定义分享的内容
			return {
				title: this.info.nickname,
				path: '/pages/index/details/index?id=' + this.id + '&type=1',
				imageUrl: this.info.avatar.startsWith('http') ? this.info.avatar : 'https://m.lqvvvv.com' + this.info
					.avatar
			};
		},
		onShareTimeline() {
			return {
				title: this.info.nickname,
				path: '/pages/index/details/index?id=' + this.id + '&type=1',
				imageUrl: this.info.avatar.startsWith('http') ? this.info.avatar : 'https://m.lqvvvv.com' + this.info
					.avatar
			};
		},
		onShow() {
			let token = uni.getStorageSync("token") || '';
			if (token != '') {
				this.getuserinfo()
			} else {
				this.userinfo.is_adolescent = 0
			}
			// #ifdef APP
			this.showinfo()
			// #endif
			// #ifdef MP-WEIXIN
			this.showinfo()
			// #endif
		},
		onHide() {
			// #ifdef H5
			this.audio.pause()
			this.audio = null;
			// #endif
			// #ifdef APP
			this.innerAudioContext.pause()
			this.innerAudioContext = null
			// #endif

			// #ifdef MP-WEIXIN
			this.innerAudioContext.pause()
			this.innerAudioContext = null
			// #endif
		},
		onUnload() {
			console.log(1)
			// #ifdef H5
			if (this.audio) {
				// 如果音频已经存在且正在播放，则暂停
				if (!this.audio.paused) {
					this.audio.pause()
					this.audio = null;
					return; // 退出函数
				}
			}
			// #endif
			// #ifdef APP
			if (this.innerAudioContext) {
				// 如果音频已经存在且正在播放，则暂停
				if (!this.innerAudioContext.paused) {
					this.innerAudioContext.pause()
					this.innerAudioContext = null
					return; // 退出函数
				}
			}
			// #endif
		},
		methods: {
			confirm(e){
				console.log(e)
				this.pickertext = e.value[0]
				this.pickershow = false
				this.show = true
			},
			gobuy() {
				let params = {
					friend_id: this.id,
					num:this.number,
					paytype:'balance'
				}
				if(this.pickertext == '余额'){
					params.paytype = 'balance'
				}else{
					params.paytype = 'wechat'
				}
				this.$Request({
					method: 'POST',
					url: '/api/gift_order/add',
					data:params,
					ismsg: true,
				}).then(res => {
					if (res.code == 1) {
						if(this.pickertext == '余额'){
							// 1. 立即关闭弹窗
							this.show = false
							
							// 2. 显示花朵
							this.showFlower = true
							
							// 3. 3秒后自动隐藏
							setTimeout(() => {
								this.showFlower = false
							}, 3000)
						}else{
							let app = this
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr,
								package: res.data.package,
								signType: res.data.signType,
								paySign: res.data.paySign,
								success: function(res) {
									uni.showToast({
										title: '支付成功！',
										icon: 'none'
									})
									// 1. 立即关闭弹窗
									app.show = false
									
									// 2. 显示花朵
									app.showFlower = true
									
									// 3. 3秒后自动隐藏
									setTimeout(() => {
										app.showFlower = false
									}, 3000)
								},
								fail: function(err) {
									uni.showToast({
										title: '支付失败！',
										icon: 'none'
									})
									console.error('支付失败', err);
									// 处理支付失败的逻辑
								}
							});
						}
						
					}
				})
			},
			goselse(num) {
				this.number = num
			},
			gocoll(index) {
				let token = uni.getStorageSync("token") || '';
				if (token != '') {
					console.log(index)
					if (index == 1) {
						this.$Request({
							method: 'POST',
							url: '/api/friend/collect',
							data: {
								friend_id: this.id
							},
							ismsg: true,
						}).then(res => {
							this.getinfo()
						})
					} else {
						this.$Request({
							method: 'POST',
							url: '/api/friend/CancelCollect',
							data: {
								friend_id: this.id
							},
							ismsg: true,
						}).then(res => {
							this.getinfo()
						})
					}
				} else {
					uni.showModal({
						title: '提示',
						content: '请登录！体验完整功能！',
						confirmText: '去登录',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.reLaunch({
									url: '/pages/login/index'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}

			},
			...mapActions(['checkRealName']),
			leftclick() {
				console.log(this.type)
				if (this.type == '1' || this.type == undefined) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					uni.navigateBack({
						delta: 1
					})
				}

			},
			goonline() {
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfcb8f13051fb4e767f' //客服地址链接
					},
					corpId: 'ww3d05dfba76a348f3', //必须和你小程序上的一致
					success(res) {
						console.log(res, 1)
					},
					fail(res) {
						console.log(res, 2)
					},
				})
			},
			govip() {
				let token = uni.getStorageSync("token") || '';
				if (token != '') {
					this.$navTo.togo('/pages/my/member/index')
				} else {
					uni.showModal({
						title: '提示',
						content: '请登录！体验完整功能！',
						confirmText: '去登录',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.reLaunch({
									url: '/pages/login/index'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			getuserinfo() {
				this.$Request({
					method: 'POST',
					url: '/api/user/getMyInfo',
					data: {},
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.userinfo = res.data
					} else {
						this.userinfo = {}
					}
				})
			},
			goimg(index) {
				let img = []
				this.info.photos.map(item => {
					img.push('https://m.lqvvvv.com' + item)
				})
				uni.previewImage({
					urls: img,
					current: index
				});
			},
			goplay() {
				this.playAudio()
			},
			videoended() {
				this.videoReset = true; // 切换状态，移除视频
				this.$nextTick(() => {
					this.videoReset = false; // 再次切换回去，重新添加视频
				});
			},
			getsubjects() {
				let params = {
					type: 2
				}
				this.$Request({
					method: 'POST',
					url: '/api/friend/getOnlineTypes',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.subjects = res.data
					}
				})
			},
			showinfo() {
				let params = {
					// #ifdef APP
					name: 'hide_status',
					// #endif
					// #ifdef MP-WEIXIN
					name: 'miniapp_hide_status'
					// #endif
				}
				this.$Request({
					method: 'POST',
					url: '/api/index/getConfig',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.isshow = res.data
					}
				})
			},
			gotime() {
				uni.showToast({
					title: '暂未开放',
					icon: 'none'
				})
			},
			async goplaymake(item) {
				console.log(item)
				try {
					let token = uni.getStorageSync("token") || '';
					if (token != '') {
						await this.checkRealName();
						if (this.isRealName) {
							// 用户已实名
							let info = {
								info: this.info,
								type: item.title,
								price: item.price,
								order_type: item.type
							}
							this.$navTo.togo('/pages/index/details/playmake', {
								info: JSON.stringify(info),
							});
						} else {
							uni.showToast({
								title: '请先实名！',
								icon: 'none'
							})
							setTimeout(() => {
								this.$navTo.togo('/pages/my/real/index')
							}, 1000)
						}
					} else {
						uni.showModal({
							title: '提示',
							content: '请登录！体验完整功能！',
							confirmText: '去登录',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									uni.reLaunch({
										url: '/pages/login/index'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				} catch (error) {
					console.error(error);
				}
			},
			getinfo() {
				let params = {
					friend_id: this.id,
					lat: this.location.latitude,
					lng: this.location.longitude,
				}
				this.$Request({
					method: 'POST',
					url: '/api/friend/getDetail',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data
						this.info.tags = this.info.tags.split(',');
						this.info.photos = this.info.photos.split(',');
						this.videoshow = true
						this.playAudio()
					}
				})
			},
			playAudio() {
				// #ifdef H5
				if (this.audio) {
					this.audio.pause();
					this.audio.currentTime = 0;
				}
				this.audio = new Audio('https://m.lqvvvv.com' + this.info.intro_voice);
				this.audio.play().catch((error) => {
					console.error("播放失败:", error);
				});
				this.audio.onended = () => {
					console.log("音频播放结束");
				};
				// #endif

				// #ifdef APP
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.src = 'https://m.lqvvvv.com' + this.info.intro_voice;

				this.innerAudioContext.play()

				this.innerAudioContext.onEnded(() => {
					console.log("音频播放结束");
				});
				// #endif

				// #ifdef MP-WEIXIN
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.src = 'https://m.lqvvvv.com' + this.info.intro_voice;

				this.innerAudioContext.play()

				this.innerAudioContext.onEnded(() => {
					console.log("音频播放结束");
				});
				// #endif
			},
			cutAlbum(index) {
				this.albumList.map(item => {
					item.show = false
				})
				this.albumList[index].show = true
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			async goMake() {

				try {
					let token = uni.getStorageSync("token") || '';
					if (token != '') {
						await this.checkRealName();
						if (this.isRealName) {
							// 用户已实名
							let app = this
							uni.showModal({
								title: '提示',
								content: '请先联系客服避免达人没时间！',
								cancelText: '联系客服',
								confirmText: '继续预约',
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
										app.$navTo.togo('/pages/index/details/make', {
											info: JSON.stringify(app.info),
											types: app.types,
										});
									} else if (res.cancel) {
										console.log('用户点击取消');
										wx.openCustomerServiceChat({
											extInfo: {
												url: 'https://work.weixin.qq.com/kfid/kfcb8f13051fb4e767f' //客服地址链接
											},
											corpId: 'ww3d05dfba76a348f3', //必须和你小程序上的一致
											success(res) {
												console.log(res, 1)
											},
											fail(res) {
												console.log(res, 2)
											},
										})
									}
								}
							});

						} else {
							uni.showToast({
								title: '请先实名！',
								icon: 'none'
							})
							setTimeout(() => {
								this.$navTo.togo('/pages/my/real/index')
							}, 1000)
						}
					} else {
						uni.showModal({
							title: '提示',
							content: '请登录！体验完整功能！',
							confirmText: '去登录',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									uni.reLaunch({
										url: '/pages/login/index'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				} catch (error) {
					console.error(error);
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F8FC;
	}
</style>
<style lang="scss" scoped>
	/* 花朵容器 */
	.flower-box {
		position: fixed;
		z-index: 9999;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		animation: flowerShow 1s ease-in, flowerHide 1s ease-out 2s forwards;

		.flower-number {
			width: 300rpx;
			color: #ff6bc4;
			text-align: center;
			margin: 0 auto;
		}
	}

	/* 花朵图片 */
	.flower-img {
		width: 300rpx;
		height: 300rpx;
	}

	/* 渐现动画 */
	@keyframes flowerShow {
		0% {
			opacity: 0;
			transform: translate(-50%, -50%) scale(0.5);
		}

		100% {
			opacity: 1;
			transform: translate(-50%, -50%) scale(1);
		}
	}

	/* 渐隐动画 */
	@keyframes flowerHide {
		0% {
			opacity: 1;
			transform: translate(-50%, -50%) scale(1);
		}

		100% {
			opacity: 0;
			transform: translate(-50%, -50%) scale(1.2);
		}
	}

	.pop-box {
		padding-top: 20rpx;

		.pop-title {
			text-align: center;
			font-weight: 600;
			font-size: 32rpx;
		}

		.icon {
			text-align: center;
			padding: 20rpx 0;

			image {
				width: 258rpx;
				height: 258rpx;
			}
		}

		.selse {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;

			.selse-item {
				width: 22%;
				background: #F3F3F3;
				border: 5rpx solid rgba(0, 0, 0, 0.0);
				height: 93rpx;
				border-radius: 20rpx;
				line-height: 93rpx;
				text-align: center;
			}

			.selse-item2 {
				width: 22%;
				background: rgba(87, 85, 242, 0.16);
				border: 5rpx solid #5755F2;
				height: 93rpx;
				border-radius: 20rpx;
				line-height: 93rpx;
				text-align: center;
			}
		}

		.input-box {
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;

			.box-title {
				width: 30%;
				text-align: right;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
				padding-right: 20rpx;
			}

			.input {
				width: 65%;
				text-align: right;
			}
		}

		.btn-box {
			width: 80%;
			text-align: center;
			line-height: 96rpx;
			height: 96rpx;
			background: linear-gradient(90deg, #C58AF0 0%, #6272ED 100%);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			color: #fff;
			margin: 0 auto;
			margin-top: 30rpx;
		}
	}

	.details {
		position: relative;

		.head-right {
			display: flex;
			align-items: center;
			color: #fff;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.heart {
				margin-left: 10rpx;
			}
		}

		.top-bg {
			position: relative;

			.swiper {
				height: 749rpx;

				.details-bg {
					width: 100%;
					height: 749rpx;
				}
			}

			.num {
				position: absolute;
				top: 20%;
				right: 50rpx;
				background: rgba(0, 0, 0, 0.4);
				padding: 10rpx 15rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
				color: #ffffff;
			}
		}

		.content {
			width: 100%;
			height: 749rpx;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			background-color: rgba(0, 0, 0, 0.30);
			pointer-events: none;

			.info-box {
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				padding: 0 0 70rpx 30rpx;

				.info-head {
					display: flex;
					align-items: center;

					.name {
						margin-right: 20rpx;
						color: #ffffff;
						font-size: 36rpx;
						font-weight: bold;
					}

					.age {
						display: flex;
						align-items: center;
						padding: 4rpx 20rpx;
						border-radius: 20rpx;
						margin-right: 15rpx;
						background: rgba(255, 255, 255, 0.27);

						image {
							width: 20rpx;
							height: 20rpx;
							margin-right: 10rpx;
						}

						.text {
							font-size: 24rpx;
						}
					}

					.vip {
						width: 100rpx;
						height: 50rpx;
					}
				}

				.figure {
					font-size: 24rpx;
					display: flex;
					margin-top: 10rpx;

					.weight {
						background: rgba(255, 255, 255, 0.27);
						border-radius: 10rpx;
						padding: 10rpx 20rpx;
						margin-right: 20rpx;
						color: #ffffff;
					}

					.address {
						background: rgba(255, 255, 255, 0.27);
						color: #ffffff;
						border-radius: 10rpx;
						padding: 10rpx 20rpx;
						display: flex;

						image {
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}
					}

				}

				.introduce {
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					font-size: 24rpx;
					color: #ffffff;

					image {
						width: 38rpx;
						height: 38rpx;
						margin-right: 30rpx;
					}
				}


			}
		}

		.voice {
			position: absolute;
			right: 0rpx;
			bottom: 10%;
			width: 129rpx;
			height: 110rpx;
			background-image: url('https://m.lqvvvv.com/assets/static/index/voice-bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ffffff;
			font-size: 24rpx;
			z-index: 999;

			image {
				width: 48rpx;
				height: 48rpx;
				margin: 0 10rpx 0 30rpx;
			}
		}

		.box {
			position: relative;
			width: 100%;
			padding: 1rpx;

			.interest-box {
				position: absolute;
				top: -50rpx;
				left: 0;
				right: 0;
				background-color: #F7F8FC;
				padding: 20rpx 30rpx;
				border-top-right-radius: 40rpx;
				border-top-left-radius: 40rpx;

				.tisp {
					position: absolute;
					right: 30rpx;
					top: 1%;

					image {
						width: 203rpx;
						height: 86rpx;
					}
				}

				.title {
					padding: 20rpx 0;
					color: #000;
					font-size: 32rpx;
					font-weight: bold;
				}

				.hobby {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.hobby-left {
						display: flex;

						.hobby-item {
							margin-right: 20rpx;
							padding: 10rpx 20rpx;
							border-radius: 15rpx;

							font-size: 28rpx;
							color: #ffffff;
						}

						.bg0 {
							background-color: #A3A2FF;
						}

						.bg1 {
							background-color: #89DCFF;
						}

						.bg2 {
							background-color: #FFD089;
						}
					}

				}

				.open-vip {
					width: 100%;
					height: 120rpx;
					background-image: url('https://m.lqvvvv.com/assets/static/index/open-vip.png');
					background-repeat: no-repeat;
					background-size: 100% 120rpx;
					display: flex;
					justify-content: space-between;
					padding: 30rpx;
					margin-top: 40rpx;

					.vip-text {
						padding: 0rpx 30rpx;
						border-radius: 20rpx;
						color: #1E0E2C;
						font-size: 22rpx;
						background-color: #FFEAB0;
						font-weight: bold;
						line-height: 60rpx;
					}
				}

				.album {
					display: flex;
					align-items: center;
					padding: 30rpx 10rpx;
					margin-top: 20rpx;

					.album-item {
						width: 120rpx;
						color: #999;
						font-size: 32rpx;
					}

					.activity-item {
						color: #000000;
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				.picture {
					width: 190rpx;
					display: flex;
					justify-content: space-between;
					flex-wrap: nowrap;

					.picture-item {
						margin-right: 30rpx;

						image {
							width: 190rpx;
							height: 190rpx;
							border-radius: 20rpx;
						}
					}
				}

				.skill {
					margin-bottom: 20rpx;

					.skill-item {
						margin-bottom: 30rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 30rpx;
						border-radius: 30rpx;
						background-color: #ffffff;

						image {
							width: 80rpx;
							height: 80rpx;
						}

						.skill-left {
							display: flex;
							align-items: center;
							color: #000000;

							.left-box {
								margin-left: 50rpx;

								.left-title {
									font-size: 28rpx;
									font-weight: bold;
								}

								.price {
									margin-top: 10rpx;
									font-size: 24rpx;

									text {
										color: #F24789;
										font-size: 40rpx;
										margin-right: 10rpx;
									}
								}
							}
						}

						.skill-btn {
							background: linear-gradient(360deg, #5755F2 0%, #8381FF 100%);
							color: #ffffff;
							padding: 15rpx 25rpx;
							font-size: 28rpx;
							border-radius: 30rpx;
						}
					}
				}
			}
		}

		.bottom-btn {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #ffffff;
			padding: 30rpx 0;
			display: flex;
			justify-content: space-around;
			color: #ffffff;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}

			.chat {
				width: 250rpx;
				height: 88rpx;
				background-image: url('https://m.lqvvvv.com/assets/static/index/chat-bg.png');
				background-size: 100% 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.liwu {
				width: 38%;
				height: 88rpx;
				background-image: url('https://m.lqvvvv.com/images/detafun2.png');
				display: flex;
				align-items: center;
				justify-content: center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.make {
				width: 58%;
				height: 88rpx;
				background-image: url('https://m.lqvvvv.com/images/detafun1.png');
				display: flex;
				align-items: center;
				justify-content: center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
		}
	}
</style>